<template>
  <Modal v-model="showDetailModal" draggable title="成员信息" width="650">
    <Form ref="formModel" :rules="ruleValidate" :model="bloc.form" :label-width="100" label-position="right">
      <FormItem label="昵称:" prop="nickname" required>
        <Input type="text" placeholder="请填写昵称" v-model="bloc.form.nickname" style="width: 400px;height: 40px;"/>
      </FormItem>
      <FormItem label="性别:" prop="sex" required>
        <RadioGroup v-model="bloc.form.sex">
          <Radio label="男"></Radio>
          <Radio label="女"></Radio>
        </RadioGroup>
      </FormItem>
      <FormItem label="身高(CM):" prop="height" required>
        <Input type="number" v-model="bloc.form.height" placeholder="请填写身高..."
               style="width: 400px;"/>
      </FormItem>
      <FormItem label="生日:" prop="birthday" required>
        <DatePicker type="date" placeholder="请填写生日" v-model="bloc.form.birthday" style="width: 400px"></DatePicker>
      </FormItem>
      <FormItem label="体重(KG):" prop="weight" required>
        <Input type="number" v-model="bloc.form.weight" placeholder="请填写体重..."
               style="width: 400px;"/>
      </FormItem>
    </Form>
    <div slot="footer">
      <Button style="width: 56px;height: 32px;" @click="modalCancel">取消</Button>
      <Button type="primary" style="margin-left: 30px;width: 56px;height: 32px;" :loading="btnload.loading"
              @click="modalOk">确定
      </Button>
    </div>
  </Modal>
</template>

<script lang="ts">
  import {Component, Vue, Prop, Watch} from 'vue-property-decorator';
  import {Loading} from '@/base/Loading';
  import {FormDetailBloc} from '@/view/member/bloc/FormDetailBloc';
  import {isEmpty} from '@/base/util/Strings';
  import {getValidatePhone} from '@/base/util/Validate';

  @Component
  export default class FormDetailModal extends Vue {
    @Prop({type: Boolean})
    readonly showDetailModal!: boolean;
    @Prop({type: Number})
    readonly idx!: number;
    @Prop({type: Number})
    readonly memberId!: number;

    bloc: FormDetailBloc = new FormDetailBloc();
    btnload = new Loading();
    validateHeightNum = (rule: any, value: number, callback: any) => {
      if (value < 1) return callback(new Error('身高须大于0'));
      return callback();
    };
    validateWeightNum = (rule: any, value: number, callback: any) => {
      if (value < 1) return callback(new Error('体重须大于0'));
      return callback();
    };
    ruleValidate = {
      nickname: [
        {required: true, message: '昵称不能为空', trigger: 'blur'}
      ],
      height: [
        {required: true, type: 'number', validator: this.validateHeightNum, trigger: 'blur'}
      ],
      birthday: [
        {required: true, type: 'date', message: '生日不能为空', trigger: 'blur'}
      ],
      weight: [
        {required: true, type: 'number', validator: this.validateWeightNum, trigger: 'blur'}
      ]
    };

    modalOk() {
      const formRef: any = this.$refs['formModel'];
      formRef.validate((valid) => {
        if (valid) {
          this.btnload.loading = true;
          this.bloc.save(this.idx, this.memberId).then(res => {
            this.btnload.loading = false;
            this.$Message.success('保存成功');
            this.modalCancel();
          }).catch(err => {
            this.btnload.loading = false;
            this.$Message.error('保存失败');
            console.log('出错啦::::', err);
          });
        }
      });
    }

    modalCancel() {
      const formRef: any = this.$refs['formModel'];
      formRef.resetFields();
      this.$emit('closeModal');
    }

    @Watch('showDetailModal')
    nameChanged(newVal: string, oldVal: string) {
      if (this.showDetailModal) this.bloc.load(this.idx);
      if (!this.showDetailModal) this.bloc.reset();
    }
  }
</script>

<style lang="less" scoped>
</style>
